<template>
  <span :class="priceClass">{{ price }}</span>
</template>

<script setup>
// 引入Composition API
import { computed } from "vue";

// 引用声明
const props = defineProps({
  value: {
    type: [String, Number],
    default: () => 0,
  },

  through: {
    type: Boolean,
    default: () => false,
  },
});

// 价格计算
const price = computed(() => {
  return parseFloat(props.value) === 0 ? "免费" : "¥" + props.value;
});

//  显示样式类
const priceClass = computed(() => {
  return props.through ? "text-gray-500 text-xs line-through" : "text-rose-500 font-bold";
});
</script>
